<template>
  <div class="group-header">
    <div v-if="isLastDepartment" class="button" @click="handleAdd">新建成员+</div>
  </div>
</template>

<script type="text/ecmascript-6">
  import {outreachGroupComputed, outreachGroupMethods} from '@state/helpers'

  const COMPONENT_NAME = 'GROUP_HEADER'

  export default {
    name: COMPONENT_NAME,
    data() {
      return {

      }
    },
    computed: {
      ...outreachGroupComputed
    },
    methods: {
      ...outreachGroupMethods,
      handleAdd() {
        this.handleModal({isShow: true, title: '新建成员', useType: 'addStaff', modalType: 'addStaff'})
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~@design"

  .group-header
    width: 100%
    height :50px
    border-bottom :0.5px solid $color-line
    display :flex
    align-items :center
    justify-content :flex-end
    .button
      margin-right :20px
      height :40px
      width :100px
      text-align :center
      line-height :@height
      background :greenyellow
</style>
